<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #data {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            margin-top: 50px;
        }

        #data img {
            width: 400px;
            height: 400px;
            text-align: center;
        }

        #choose {
            width: 400px;
            height: 80px;
            display: flex;
            align-items: center;
            margin-left: 115px;

        }

        #choose img {
            box-sizing: border-box;
            display: block;
            width: 80px;
            height: 80px;
            padding: 1px;
        }

        .con {
            border: 1px solid purple;

        }

        #data div {
            /*  640px */
            width: 400px;
            height: 400px;
            overflow: hidden;
            /* position: absolute; */

        }

        #big {
            width: 850px !important;
            height: 850px !important;
        }

        #font {
            position: relative;
        }

        #mark {
            position: absolute;
            width: 100px !important;
            height: 100px !important;
            background: rgba(0, 0, 0, 0.2);
            cursor: crosshair;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="data" ref="tab">
            <!-- 如果鼠标进入过快会有bug @mouseenter这里不能用
            可以用 @mouseover-->
            <div ref="inline" id="font" @mouseover="flag=true" @mouseout="flag=false" @mousemove="enter">
                <!-- 这里用了两个ref父级元素的ref因为加了弹性布局，父级元素无法获取offsetLeft,在子元素获取offsetLeft, 
                在父级元素添加margin-top，同样子元素获取不到offsetTop的值，所以只能在父元素获取offsetTop -->
                <div v-show="flag" id="mark"></div>
                <!-- 鼠标出现闪烁出现两种,第一种在子元素上设置了鼠标事件需要添加给父元素，第二种是给父元素添加了绝对定位属性,应该用相对定位 -->
                <img ref="small" id="small" :src="'imgs/'+url[num]" alt="">
            </div>

            <!-- 640px -->
            <div>
                <img v-show="flag" id="big" :src="'imgs/'+url[num]" alt="">
            </div>

        </div>

        <div id="choose">
            <img v-for="(item,index) in  url" :class="{con:index==num}" @click="num=index" :src="'imgs/'+item" alt="">
        </div>


    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            smallx: 0,
            smally: 0,
            bigx: 0,
            bigy: 0,
            num: 0,
            flag: false,
            url: [
                "0.jpg", "1.jpg", "2.jpg", "3.jpg", "4.jpg"
            ],

        },
        methods: {
            enter: function (e) {
                // console.log(this.event);
                // this.$nextTick(function(){
                var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
                // console.log(scrollTop);
                var offsetTop = this.$refs.tab.offsetTop;
                var offsetLeft = this.$refs.inline.offsetLeft;
                console.log(offsetLeft, offsetTop);

                this.smallx = e.clientX - offsetLeft;
                // offsetX
                this.smally = e.clientY - (offsetTop - scrollTop);

                // var y = this.$refs.small.offsetHeight

                // console.log(this.smallx, this.smally);
                this.bigx = this.smallx;
                this.bigy = this.smally;
                //    console.log(this.bigx,this.bigy);

                big.style.marginLeft = -this.bigx - 62.5 + "px";
                big.style.marginTop = -this.bigy - 62.5 + "px";
                if (this.smally - 50 <= 0) {
                    this.smally = 50;
                }
                if (this.smally - 50 >= 300) {
                    this.smally = 350;
                }
                if (this.smallx - 50 <= 0) {
                    this.smallx = 50;

                }
                if (this.smallx - 50 >= 300) {
                    this.smallx = 350;
                }
                mark.style.top = this.smally - 50 + "px";
                mark.style.left = this.smallx - 50 + "px";


            }

        },

    })
</script>

</html>